
import { getHiddenList, setHiddenStatus } from '@/api';
import useAppStore from '@ide/store';
import React, { useCallback, useEffect, useState } from 'react';
import { Button, Table } from 'tea-component';
import { Modal } from 'tea-component/lib/modal/Modal';

const { pageable, autotip } = Table.addons;

const ManageHiddenContract = React.forwardRef(() => {
  const { setting } = useAppStore();
  const [isLoading, setIsLoading] = useState(false);
  const [pageIndex, setPageIndex] = useState<number>(1);
  const [recordCount, setRecordCount] = useState<number>(0);
  const { editHiddenContractsVisible, setEditHiddenContractsVisible, getFiles } = useAppStore();
  const [list, setList] = useState<any[]>([]);
  const getList = useCallback(async () => {
    setIsLoading(true);
    const res = await getHiddenList({
      pageSize: 10,
      page: pageIndex
    });
    setIsLoading(false);
    if (res.data?.contractList?.length) {
      setRecordCount(res.data?.total || 0);
      setList(res.data?.contractList || []);
    }else{
      setRecordCount(0);
      setList([]);
    }
  }, [pageIndex]);
  const switchHidden = useCallback((contractName:string, hidden: boolean) => {
    setHiddenStatus({
      contractName,
      hidden: hidden
    }).then((res) => {
      if(res.code===0){
        const newlist = list.map((item)=>{
          if(item.Contract === contractName){
            item.Hidden =  hidden;
          }
          return item;
        })
        setList(newlist);
        getFiles();
      }
    });
  }, [list]);
  useEffect(() => {
    if (editHiddenContractsVisible) {
      getList();
    }
  }, [editHiddenContractsVisible]);
  return <Modal
    maskClosable
    visible={editHiddenContractsVisible}
    caption="编辑中合约列表"
    onClose={() => setEditHiddenContractsVisible(false)}
    className={`${setting.theme}_model`}
    size={600}
    maskStyle={{
      backgroundColor: 'rgba(0,0,0,0.2)'
    }}
  >
    <Modal.Body>
      <div className='dialog-table'>
        <div className='dialog-sub-t'>此处展示正在编辑中的合约，隐藏后合约列表处不再展示。</div>
        <Table
          columns={[{
            key: 'Contract',
            header: '合约名称'
          },
          {
            key: 'Hidden',
            header: '状态',
            render: ({ Hidden }) => Hidden ? '已隐藏' : '已显示'
          },
          {
            key: 'ip',
            header: '操作',
            width: 80,
            render: ({ Hidden, Contract }) => (<>{
              Hidden ? <Button type="link" onClick={() => switchHidden(Contract, !Hidden)}>展示</Button> : <Button type="link" onClick={() => switchHidden(Contract, !Hidden)}>隐藏</Button>
            }</>)
          }]}
          records={list}
          recordKey="Contract"
          addons={[
            pageable(
              {
                onPagingChange: ({ pageIndex }) => {
                  setPageIndex(pageIndex || 0);
                },
                pageSizeVisible: false,
                pageIndex,
                recordCount,
                pageIndexVisible: false,
                endJumpVisible: false
              }),
            autotip({
              emptyText: '暂无数据',
              isLoading
            })]

          }
        />
      </div>
    </Modal.Body>
    {/* <Modal.Footer>
      <Button type="primary" onClick={handleSubmit(submit)}>
        确定
      </Button>
      <Button type="weak" onClick={onClose}>
        取消
      </Button>
    </Modal.Footer> */}
  </Modal>;
});
ManageHiddenContract.displayName = 'ManageHiddenContract';

export default ManageHiddenContract;
